<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>添加商品</title>
	<link href="/css/bootstrap.css" rel="stylesheet">
	<script src="/js/jquery-2.1.4.js"></script>
	<script src="/js/vue.js"></script>
	<script src="/js/bootstrap.js"></script>
</head>
<body>
<div id="app">
	<form>
		<select v-model="coid">
			<option value="0">请选择商品一级类别</option>
			<option v-for="co in onelist" :value="co.id" @click="console.log(this.coid)">{{co.categoryName}}</option>
		</select>
		<br>
		<select v-model="ctid">
			<option value="0">请选择商品二级类别</option>
			<option v-for="ct in twolist" :value="ct.id">{{ct.categoryName}}</option>
		</select>
		<br>
		<select v-model="cqid">
			<option value="0">请选择商品三级类别</option>
			<option v-for="cq in threelist" :value="cq.id">{{cq.categoryName}}</option>
		</select>
		<br>
		<!--<select v-model="storeid">
			<option value="0">请选择店铺</option>
			<option v-for="(s,sindex) in storelist" :key="sindex" :value="s.id" @click="fun1(sindex)">{{s.name}}</option>
		</select>-->
		<input type="text" v-model="productName" placeholder="请输入商品名" />
		<br>
		<input type="text" v-model="freight" name="freight" placeholder="请输入运费"/>
		<br>
		<input type="text" v-model="shipAddress" placeholder="请输入商品发货地址 "/>
		<br>
		<input type="button" value="提交" class="btn btn-primary" @click="addProduct()" >
	</form>
	<hr>
	<form>
		<input type="text" v-model="introduce" placeholder="请输入商品描述">
		<input type="button" value="提交" class="btn btn-primary" @click="addIntroduce()">
	</form>
	<hr>
	<table>
		<tr>
			<td>属性</td>
			<td>单价</td>
			<td>数量</td>
		</tr>
		<form id="form">
			<tr class="tr">
				<td><input type="text" v-model="property1" placeholder="输入商品属性"></td>
				<td><input type="number" min="0" v-model="price1" placeholder="商品单价"></td>
				<td><input type="number"min="0" v-model="number1" placeholder="商品数量"></td>
			</tr>
			<tr class="tr">
				<td><input type="text" v-model="property2" placeholder="输入商品属性"></td>
				<td><input type="number"min="0" v-model="price2" placeholder="商品单价"></td>
				<td><input type="number" min="0"v-model="number2" placeholder="商品数量"></td>
			</tr>
			<tr class="tr">
				<td><input type="text" v-model="property3" placeholder="输入商品属性"></td>
				<td><input type="number"min="0" v-model="price3" placeholder="商品单价"></td>
				<td><input type="number" min="0"v-model="number3" placeholder="商品数量"></td>
			</tr>
		</form>
	</table>
	<input type="button" value="提交" class="btn btn-primary" @click="addSKU()">
</div>
<script>
	new Vue({
		el: "#app",
		data() {
			return {
				coid: 0,
				ctid: 0,
				cqid: 0,
				// storeid: 0,
				onelist: '',
				twolist: '',
				threelist: '',
				freight:'',
				shipAddress:'',
				productName:'',
				introduce:'',
				property1:'',
				price1:'',
				number1:'',
				property2:'',
				price2:'',
				number2:'',
				property3:'',
				price3:'',
				number3:'',
				introduce:''
				// storelist: '',
				// storeName: ''
			}
		},
		created() {
			this.loadOneType();
			this.loadStore();
		},
		methods: {
			addIntroduce:function () {
				var _this=this;
				$.ajax({
					url:"/product/addIntroduce",
					data:{
						introduce:_this.introduce
					} ,
					dataType:"json",
					type:"post",
					success:function(data){
						alert("添加成功");
					},
					error:function(data){
						alert("error");
					}
				});
			},
			addProduct:function(){
			if(this.cqid==0){
				alert("请选择三级id");
				return;
			}
			console.log(this.shipAddress);
			if(this.productName==''||this.freight==''||this.shipAddress==''){
				alert("商品描述等不能为空");
				return;
			}
			var _this=this;
			$.ajax({
				url:"/product/addProduct",
				type:"post",
				data:{
					categoryId:_this.cqid,
					productName:_this.productName,
					freight:_this.freight,
					shipAddress:_this.shipAddress
				},
				dataType:"json",
				success:function(data){
					alert("添加成功");
				},
				error:function(data){
					alert("error");
				}
			})
			},
			loadOneType: function() {
				var _this = this;
				$.ajax({
					url: "/testadd/getonetype",
					type: "get",
					dataType: "json",
					success: function(data) {
						_this.onelist = data.list;
					},
					error: function(data) {
						alert("error");
					}
				})
			},
			loadTwoType: function(pid) {
				var _this = this;
				$.ajax({
					url: "/testadd/getchildtype",
					type: "get",
					dataType: "json",
					data: {
						id: pid
					},
					success: function(data) {
						_this.twolist = data.list;
					},
					error: function(data) {
						alert("error");
					}
				})
			},
			loadThreeType: function(pid) {
				var _this = this;
				$.ajax({
					url: "/testadd/getchildtype",
					type: "get",
					dataType: "json",
					data: {
						id: pid
					},
					success: function(data) {
						_this.threelist = data.list;
					},
					error: function(data) {
						alert("error");
					}
				})
			},
			/*fun1: function(index) {
				this.storeName = this.storelist[index].storeName;
			},*/
			loadStore: function() {
				var _this = this;
				$.ajax({
					url: "/testadd/getallstore",
					type: "get",
					dataType: "json",
					success: function(data) {
						_this.storelist = data.list;
					},
					error: function(data) {
						alert("error");
					}
				})
			},
			addSKU:function () {
				var skus=new Array();
				var sku1={property:this.property1,price:this.price1,number:this.number1};
				var sku2={property:this.property2,price:this.price2,number:this.number2};
				var sku3={property:this.property3,price:this.price3,number:this.number3};
				skus.push(sku1);
				skus.push(sku2);
				skus.push(sku3);
				var json=JSON.stringify(skus);
				console.log(json);
				var _this=this;
				$.ajax({
					url:"/product/addSKU",
					data:json ,
					contentType:"application/json",
					dataType:"json",
					type:"post",
					success:function(data){
						alert("添加成功");
						location.href="addProductImages.html";
					},
					error:function(data){
						alert("error");
					}
				});
			}
		},
		watch: {
			coid:function(){
				this.loadTwoType(this.coid);
			},
			ctid:function(){
				this.loadThreeType(this.ctid);
			}
		}
	})
</script>
</body>
</html>
